<template>
  <div class="app-container">
    <div class="mb_20">
      <!-- 搜索 -->
      <el-row :gutter="20" class="mb_20">
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">行业类别</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">投资类别</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目类型</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
          <el-button type="primary" icon="el-icon-upload2">导出</el-button>
          <el-button type="primary" icon="el-icon-upload2" @click="dialogFormVisible = true">新增</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">投资总额</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目单位</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="search_input">
            <div class="search_name">项目阶段</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col> -->
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="项目名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="所属公司" align="center">
        <template slot-scope="scope">
          {{ scope.row.a }}
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.b }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行业" align="center">
        <template slot-scope="scope">
          {{ scope.row.c }}
        </template>
      </el-table-column>
      <el-table-column label="项目阶段" align="center">
        <template slot-scope="scope">
          {{ scope.row.c }}
        </template>
      </el-table-column>
      <el-table-column label="地区" align="center">
        <template slot-scope="scope">
          {{ scope.row.c }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="投资总额" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.d | statusFilter">{{ scope.row.d }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toDetail(scope)">编辑</el-button>
          <el-button size="mini" type="primary" @click="toDetail(scope)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单 -->
    <el-dialog title="项目上报" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="24">
             <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目编码" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目类型" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目所属公司" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="投资总额" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="风险值" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="风险级别" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目区域" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目分类" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目标签" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="预期经济效益" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="完工经济效益" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="建设内容概述" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目开始日期" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="项目截止日期" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="审核结果" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogFormVisible:false,
      form:{
        name:'',
        region:''
      },
      list: [
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
        {
          name: "漯河市大数据产业园投资建设方案",
          a: "信产投",
          b: "河南信息产业投资有限公司",
          c: "网络信息",
          d: "投后",
        },
      ],
      listLoading: false,
      input: "",
    };
  },
  created() {
    // this.fetchData();
  },
  methods: {
    // fetchData() {
    //   this.listLoading = true;
    //   getList().then((response) => {
    //     this.list = response.data.items;
    //     this.listLoading = false;
    //   });
    // },
    toDetail(data) {},
  },
};
</script>
<style lang="scss">
</style>